<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4855483_tgfkxm7y0xi.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4855551_pz34p55ic4e.css">
    <link rel="stylesheet" href="headdder.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
</head>
<body>
    <div id="headdder">
        <div id="header-left">
            <img src="logo.png" alt="网易云音乐" title="网易云音乐">
            <div id="header-mid">
                <ul>
                    <li>发现音乐</li>
                    <li>我的音乐</li>
                    <li>关注</li>
                    <li>商城</li>
                    <li>音乐人</li>
                    <li>云推歌</li>
                    <li>下载客户端</li>
                </ul>
            </div>
        </div>
        <div id="header-middle">
            <div id="header-search">
                <div>
                    <span id="if" class="iconfont">&#xe78c;</span>
                    <input type="text" id="search_input" value="音乐/视频/电台/用户">
                </div>
            </div>
        </div>
        <div id="header-right">  
            <div id="create"><a href="javascript:;">创作者中心</a></div>
            <div id="logining"><a href="javascript:;" >登录</a></div>
            <img src="./image.png" alt="用户头像" id="usertx">
        </div>
        <div id="list">
            <a href="#">我的主页</a>
            <a href="#">我的消息</a>
            <a href="#" id="tuichu">退出</a>
        </div>

        <!-- 短信验证码登录 -->
        <div id="loginboxnumber">
            <div id="login_top">手机号登录<span id="closeloginone" class="iconfont">&#xe61c; </span></div>
            
            <div id="login_middle">
                <div id="firstline"><span class="iconfont">+86&#xe61b;&ensp;</span><input type="text" placeholder="请输入手机号" id="email"></div>
                <div id="secondline">
                    <div id="input">
                        <input type="text" placeholder="请输入短信验证码" id="code">
                    </div>
                    <button id="get_code">获取验证码</button>
                </div>
                <button id="btnlogin">登录</button>

            </div>
            <div id="stlogin">密码登录</div>
            <div id="login_bottom">&lt; <span id="duanxinotherlogin">其他登录方式</span></div>
        </div>


        <!-- 密码登录 -->
         <div id="loginboxpw">
            <div id="login_top">手机号登录<span id="closelogin2" class="iconfont">&#xe61c; </span></div>

            <div id="login_middle">
                <div id="firstline"><span class="iconfont">+86&#xe61b; <icon id="closelogin">&ensp;</icon></span><input type="text" placeholder="请输入手机号" id="srnumber"></div>
                <div id="secondline">
                    <input type="text" placeholder="请输入密码" id="srmm">
                    <div id="unpw">忘记密码?</div>
                </div>
                <div id="thirdline">
                    <span id="duanxin">短信登录</span>
                    <label><input type="checkbox">自动登录</label>
                </div>
                <button id="srbtnlogin">登录</button>
            </div>

            <div id="login_bottom">&lt; <span id="mmolg">其他登录方式</span></div>
         </div>


        
        <!-- 注册 -->
        <div id="zhuce">
            <div id="zhuce_top">注册 <span id="closelogin3" class="iconfont">&#xe61c; </span></div>
            <div id="zhuce_middle">
                <div id="innb">
                    <span class="iconfont">+86&#xe61b;</icon></span>
                    <input type="text" placeholder="请输入手机号" id="inemail">
                </div>
                <div id="zhucesecline">
                    <input type="text" placeholder="请输入验证码" id="incode">
                    
                </div>    
                <button id="inget_code">获取验证码</button>
                <input type="password" placeholder="请输入密码" id="inpwd">
                
                <button id="zhuce_btn">注册</button>
            </div>
            <div id="zhuce_bottom">&lt; <span id="zcdl">登录</span></div>
        </div>


        <!-- 首界面 -->
        <div id="otherlogin">
            <div id="firstline">
                <span>登录</span>
                <span id="closelogin4" class="iconfont">&#xe61c; </span>
            </div>
            <div id="secondline">
                <div id="secleft">
                    <div><img src="./dldl.png" alt=""></div>
                    <div><button id="oldl">登录</button></div>
                    <div><button id="olzc">注册</button></div>
                    <div><input type="checkbox" id="agree"> &nbsp;同意《服务条款》《隐私政策》《儿童隐私政策》</div>
                </div>
                <div id="secright">
                    <div><span id="span1"></span>微信登录</div>
                    <div><span id="span2"></span>QQ登录</div>
                    <div><span id="span3"></span>微博登录</div>
                    <div><span id="span4"></span>网易邮箱账号登录</div>
                </div>
            </div>
            <div id="ewm">
                <img src="./ewm.png" alt="二维码">
            </div>
            
        </div>


    </div>
    <script src="headdder.js"></script>
</body>
</html>
